﻿<!--
 * # 模块 HTML:
 *  Everyone - 日历
 *
 * # 描述:
 *  向每一位用户提供一个日历界面。
 *
 * Copyright (c), 上海沃恩信息科技有限公司.
 * All rights reserved.
 * Licensed under BSD (https://www.pittypat.work/bsd.html).
-->

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <title>日历</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="author" content="上海沃恩信息科技有限公司" />

    <link rel="icon" type="image/png" href="../app.png" />

    <link rel="stylesheet" href="../../../../mdc/material-components-web.min.css" />
    <link rel="stylesheet" href="../../../../css/pittypat.css" />
    <style>
        .pt-main > header {
            display: flex;
            align-items: center;
        }

            .pt-main > header > button {
                flex: 0 0 auto;
                background: none;
                border: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 0 0 16px;
                padding: 0;
            }

            .pt-main > header > h2 {
                flex: 1 1 auto;
                margin: 0;
            }

            .pt-main > header small {
                padding: 0 2px;
                font-size: .625em;
                color: rgba(0,0,0,0.54);
                color: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54));
            }

        #calendar {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

            #calendar td {
                border: 1px solid rgba(0,0,0,0.05);
                padding: 0;
            }

            #calendar > thead th {
                padding: 16px 0;
            }

            #calendar > tbody {
                background-color: #fff;
                background-color: var(--mdc-theme-background, #fff);
            }

        .day {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            box-sizing: border-box;
        }

        .day-value {
            box-sizing: border-box;
            padding: 12px 8px 8px 8px;
            font-size: 3em;
            text-align: center;
        }

        .day-name {
            box-sizing: border-box;
            padding: 8px 8px 12px 8px;
            height: 40px;
            line-height: 20px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
        }

        @media (max-width:479px) {
            .day-value {
                font-size: 1.25em;
            }

            .day-name {
                display: none;
            }
        }

        .prev-month-day,
        .next-month-day {
            color: rgba(0, 0, 0, 0.38);
            color: var(--mdc-theme-text-disabled-on-background, rgba(0, 0, 0, 0.38));
        }

        .today {
            border-bottom: 4px solid #ff3d00;
            border-bottom: 4px solid var(--mdc-theme-accent, #ff3d00);
        }

        .today > .day-name {
            padding-bottom: 8px;
        }

        .this-month-day.holiday {
            color: #03a9f4;
            color: var(--mdc-theme-primary, #03a9f4);
        }

        .prev-month-day.holiday,
        .next-month-day.holiday {
            color: rgba(3, 169, 244, 0.54);
            color: var(--theme-secondary-primary, rgba(3, 169, 244, 0.54));
        }
    </style>
</head>
<body class="pt-nav-pinned">
    <!-- 页眉 -->
    <header>
        <section class="pt-page-toolbar">
            <button class="pt-nav-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">menu</i>
            </button>
            <h1 class="pt-page-title">日历</h1>
            <button class="pt-nc-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">chat_bubble_outline</i>
                <b></b>
            </button>
            <button class="pt-page-menu-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">more_vert</i>
            </button>
            <div class="pt-page-menu mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
                <div class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a class="mdc-list-item pt-page-refresh" role="menuitem" tabindex="0">
                        <i class="material-icons mdc-list-item__start-detail">refresh</i>
                        <span>刷新页面</span>
                    </a>
                    <div class="mdc-list-divider" role="separator"></div>
                    <a class="mdc-list-item" role="menuitem" tabindex="0" href="help/index.html" target="_blank">
                        <i class="material-icons mdc-list-item__start-detail">help_outline</i>
                        <span>查看帮助</span>
                    </a>
                    <div class="mdc-list-divider pt-page-menu-logout-divider" role="separator"></div>
                    <a class="mdc-list-item pt-page-menu-logout" role="menuitem">
                        <i class="material-icons mdc-list-item__start-detail">power_settings_new</i>
                        <span>退出</span>
                    </a>
                </div>
            </div>
        </section>
    </header>

    <!-- 工作区 -->
    <main class="pt-main" role="main">
        <header>
            <h2><span id="this-year">2017</span><small>年</small><span id="this-month">06</span><small>月</small></h2>
            <button id="to-prev-month" class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">chevron_left</i>
            </button>
            <button id="to-current-month" class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">settings_backup_restore</i>
            </button>
            <button id="to-next-month" class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">chevron_right</i>
            </button>
        </header>
        <table id="calendar">
            <thead>
                <tr>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                    <th>日</th>
                </tr>
            </thead>
            <tbody class="mdc-elevation--z1"></tbody>
        </table>
    </main>
    
    <!-- 导航列表 -->
    <nav class="pt-nav">
        <article class="pt-nav-panel">
            <header>
                <div class="pt-nav-toolbar">
                    <a class="mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" href="../../../../index.html" title="返回首页">
                        <i class="material-icons">home</i>
                    </a>
                    <a class="pt-nav-refresh mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="刷新导航">
                        <i class="material-icons">update</i>
                    </a>
                    <a class="pt-nav-pin mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="取消固定导航">
                        <i class="material-icons">call_received</i>
                    </a>
                </div>
                <div class="pt-nav-userbar">
                    <a href="../../../waln/authority/profile/index.html">
                        <i class="material-icons">account_circle</i>
                        <b>未登录</b>
                    </a>
                </div>
            </header>
            <section></section>
        </article>
        <!-- 导航列表的背景，不要移除该元素 -->
        <div></div>
    </nav>
    
    <!-- 通知中心 -->
    <aside class="pt-nc">
        <article class="pt-nc-panel">
            <header>
                <a class="pt-nc-close mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" data-nc-close>
                    <i class="material-icons">close</i>
                </a>
                <h1>通知中心</h1>
                <a class="mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" href="../../../waln/notifying/inbox/list.html" title="所有已接收">
                    <i class="material-icons">inbox</i>
                </a>
            </header>
            <section></section>
        </article>
        <!-- 通知中心的背景，不要移除该元素 -->
        <div></div>
    </aside>

    <script src="../../../../js/jquery.min.js"></script>
    <script src="../../../../mdc/material-components-web.min.js"></script>
    <script src="../../../../js/pittypat.js"></script>
    <script src="_api.js"></script>
    <script src="dates.js"></script>
</body>
</html>